import React, {useEffect, useState} from 'react';
import {useNavigate, useParams} from "react-router-dom";
import {deleteStuById, getStuByIdApi} from "../api/stuApi";

function Detail(props) {
    const {id} = useParams()
    const navigate = useNavigate()
    const [stu, setStu] = useState({
        name: '',
        age: '',
        education: '本科',
        profile: ''
    })
    useEffect(() => {
        getStuByIdApi(id).then(({data}) => {
            setStu(data)
        })
    }, [id]);
    const deleteStu = (id) => {
        if (window.confirm('你是否要删除此用户？')) {
            deleteStuById(id).then(()=> {
                navigate('/home', {
                    alert: '用户删除成功',
                    type: 'info'
                })
            })
        }
    }
    return (
        <div className="detail container">
            <button className="btn btn-default" onClick={()=> navigate('/home')}>返回</button>
            <h1 className="page-header">
                {stu.name}
                <span className="pull-right">
                    <button className="btn btn-primary" onClick={() => navigate(`/edit/${stu.id}`)}
                            style={{marginRight: 10}}>修改</button>
                    <button className="btn btn-danger" onClick={() => deleteStu(stu.id)}
                            style={{marginRight: 10}}>删除</button>
                </span>
            </h1>
            <ul className="list-group">
                <li className="list-group-item">
                    <span className="glyphicon glyphicon-book">文化水平：{stu.education}</span>
                </li>
                <li className="list-group-item">
                    <span className="glyphicon glyphicon-user">个人简介：{stu.profile}</span>
                </li>
            </ul>
        </div>
    );
}

export default Detail;